<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园情感辩论大师</title>
    <style>
        :root {
            --pure-love-color: #FF6B6B;
            --player-color: #4ECDC4;
            --background-color: #FFF5E6;
            --chat-bg-color: #FFFFFF;
            --text-color: #414141;
            --light-accent: #FFD1DA;
            --dark-accent: #45B7D1;
            --pure-glow: 0 0 8px var(--pure-love-color);
            --player-glow: 0 0 8px var(--player-color);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Heiti SC', sans-serif;
        }
        
        body {
            background-color: var(--background-color);
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 40%, rgba(78, 205, 196, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 40% 70%, rgba(255, 209, 218, 0.1) 0%, transparent 25%);
            color: var(--text-color);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            background-color: var(--chat-bg-color);
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }
        
        .header {
            background: linear-gradient(135deg, #FF9A8B, #FF6B95);
            padding: 25px;
            text-align: center;
            position: relative;
        }
        
        .header h1 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .header p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .debate-title {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 15px;
        }
        
        .debate-side {
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        .pure-love {
            background-color: rgba(255, 107, 107, 0.2);
            color: var(--pure-love-color);
            border: 1px solid var(--pure-love-color);
        }
        
        .player {
            background-color: rgba(78, 205, 196, 0.2);
            color: var(--player-color);
            border: 1px solid var(--player-color);
        }
        
        .vs {
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
        }
        
        .chat-wrapper {
            display: flex;
            height: 550px;
            border-top: 1px solid #F0F0F0;
        }
        
        .chat-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .chat-panel.pure-love-panel {
            border-right: 1px solid #F0F0F0;
        }
        
        .panel-header {
            padding: 15px;
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
            border-bottom: 1px solid #F0F0F0;
        }
        
        .panel-header.pure-love-header {
            background-color: rgba(255, 107, 107, 0.05);
            color: var(--pure-love-color);
        }
        
        .panel-header.player-header {
            background-color: rgba(78, 205, 196, 0.05);
            color: var(--player-color);
        }
        
        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: var(--chat-bg-color);
            scrollbar-width: thin;
            scrollbar-color: var(--dark-accent) transparent;
        }
        
        .chat-container::-webkit-scrollbar {
            width: 6px;
        }
        
        .chat-container::-webkit-scrollbar-thumb {
            background-color: var(--dark-accent);
            border-radius: 3px;
        }
        
        .message {
            margin-bottom: 20px;
            max-width: 85%;
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .user-message {
            background: linear-gradient(135deg, #FFD1DA, #FF9A8B);
            padding: 15px;
            border-radius: 15px 15px 5px 15px;
            margin-left: auto;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.1);
            color: #FFF;
        }
        
        .ai-message {
            background: white;
            padding: 15px;
            border-radius: 15px 15px 15px 5px;
            margin-right: auto;
            border: 1px solid #E0E0E0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .ai-message.pure-love-side {
            border-left: 4px solid var(--pure-love-color);
        }
        
        .ai-message.player-side {
            border-left: 4px solid var(--player-color);
        }
        
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: white;
        }
        
        .avatar-pure {
            background-color: var(--pure-love-color);
        }
        
        .avatar-player {
            background-color: var(--player-color);
        }
        
        .message-sender {
            font-weight: bold;
            margin-right: 8px;
        }
        
        .message-time {
            color: #999;
            font-size: 0.8rem;
        }
        
        .message-content {
            line-height: 1.6;
        }
        
        .suggestions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 15px 20px;
            background-color: var(--chat-bg-color);
            border-top: 1px solid #F0F0F0;
        }
        
        .suggestion-tag {
            padding: 8px 15px;
            border: 1px solid #E0E0E0;
            border-radius: 20px;
            background-color: white;
            color: var(--text-color);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .suggestion-tag:hover {
            background-color: var(--light-accent);
            border-color: var(--pure-love-color);
            color: var(--pure-love-color);
        }
        
        .input-container {
            display: flex;
            padding: 20px;
            background-color: white;
            border-top: 1px solid #F0F0F0;
        }
        
        #user-input {
            flex: 1;
            padding: 15px;
            border: 1px solid #E0E0E0;
            border-radius: 30px;
            background-color: #FAFAFA;
            color: var(--text-color);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }
        
        #user-input:focus {
            box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
            border-color: var(--player-color);
        }
        
        #send-button {
            margin-left: 10px;
            padding: 15px 30px;
            border: none;
            border-radius: 30px;
            background: linear-gradient(90deg, var(--player-color), var(--dark-accent));
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.2);
        }
        
        #send-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(78, 205, 196, 0.3);
        }
        
        #send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .thinking-indicator {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 0.9rem;
            margin: 10px 0;
        }
        
        @media (max-width: 768px) {
            .container {
                max-width: 100%;
                height: 100vh;
                border-radius: 0;
            }
            
            .chat-wrapper {
                flex-direction: column;
                height: calc(100vh - 320px);
            }
            
            .chat-panel.pure-love-panel {
                border-right: none;
                border-bottom: 1px solid #F0F0F0;
            }
            
            .header h1 {
                font-size: 1.6rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园情感辩论大师</h1>
            <p>探讨校园恋爱中的情感困惑，纯爱与现实的碰撞</p>
            <div class="debate-title">
                <div class="debate-side pure-love">纯爱战神</div>
                <div class="vs">VS</div>
                <div class="debate-side player">狗血海王</div>
            </div>
        </div>
        
        <div class="chat-wrapper">
            <!-- 纯爱战神面板 -->
            <div class="chat-panel pure-love-panel">
                <div class="panel-header pure-love-header">
                    纯爱战神
                </div>
                <div class="chat-container" id="pure-love-chat">
                    <div class="message ai-message pure-love-side">
                        <div class="message-header">
                            <div class="avatar avatar-pure">纯</div>
                            <div class="message-sender">纯爱战神</div>
                            <div class="message-time">今天 10:00</div>
                        </div>
                        <div class="message-content">
                            你好！我是纯爱战神，坚定地相信校园恋爱应该是纯粹、专一且充满真心的。在我看来，真正的爱情不需要华丽的技巧或游戏，而是两个人相互理解、支持和成长的过程。如果你有任何关于校园情感的困惑，我会从纯爱的角度为你认真分析！
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 狗血海王面板 -->
            <div class="chat-panel player-panel">
                <div class="panel-header player-header">
                    狗血海王
                </div>
                <div class="chat-container" id="player-chat">
                    <div class="message ai-message player-side">
                        <div class="message-header">
                            <div class="avatar avatar-player">海</div>
                            <div class="message-sender">狗血海王</div>
                            <div class="message-time">今天 10:02</div>
                        </div>
                        <div class="message-content">
                            哟，这位同学看来很理想化啊！作为狗血海王，我得提醒你，校园情感世界可比你想象的复杂多了。在这个阶段，我们应该多体验、多尝试，而不是过早地被单一关系束缚。有时候，一点"狗血"反而能让我们更快地成长，更清楚自己想要什么。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="suggestions">
            <div class="suggestion-tag" data-question="我同时喜欢上两个人，该怎么办？">同时喜欢两个人</div>
            <div class="suggestion-tag" data-question="如何判断对方是不是真心喜欢我？">判断真心</div>
            <div class="suggestion-tag" data-question="恋爱中应该保持个人空间吗？">个人空间</div>
            <div class="suggestion-tag" data-question="校园恋爱需要考虑未来吗？">考虑未来</div>
            <div class="suggestion-tag" data-question="如何处理恋爱中的信任问题？">信任问题</div>
            <div class="suggestion-tag" data-question="单身和恋爱哪个更好？">单身vs恋爱</div>
        </div>
        
        <div class="input-container">
            <input type="text" id="user-input" placeholder="输入你的情感问题...">
            <button id="send-button">发送</button>
        </div>
    </div>
 
    <script>
        // DOM元素
        const pureLoveChat = document.getElementById('pure-love-chat');
        const playerChat = document.getElementById('player-chat');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        const suggestionTags = document.querySelectorAll('.suggestion-tag');
 
        // 添加消息到指定聊天面板
        function addMessage(chatContainer, content, isUser = false, side = 'pure-love') {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            
            if (isUser) {
                messageDiv.classList.add('user-message');
                messageDiv.innerHTML = `<p>${formatContent(content)}</p>`;
            } else {
                messageDiv.classList.add('ai-message');
                messageDiv.classList.add(`${side}-side`);
                
                const now = new Date();
                const timeStr = `${now.getMonth()+1}月${now.getDate()}日 ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                const senderName = side === 'pure-love' ? '纯爱战神' : '狗血海王';
                const avatarClass = side === 'pure-love' ? 'avatar-pure' : 'avatar-player';
                const avatarChar = side === 'pure-love' ? '纯' : '海';
                
                messageDiv.innerHTML = `
                    <div class="message-header">
                        <div class="avatar ${avatarClass}">${avatarChar}</div>
                        <div class="message-sender">${senderName}</div>
                        <div class="message-time">${timeStr}</div>
                    </div>
                    <div class="message-content">${formatContent(content)}</div>
                `;
            }
            
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return messageDiv;
        }
 
        // 格式化内容，处理换行
        function formatContent(content) {
            if (!content) return '';
            return content
                .replace(/\n/g, '<br>')
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        }
        
        // 添加思考中指示器
        function addThinkingIndicator(chatContainer, side) {
            const thinkingDiv = document.createElement('div');
            thinkingDiv.classList.add('message', 'ai-message', `${side}-side`, 'thinking-indicator');
            
            const senderName = side === 'pure-love' ? '纯爱战神' : '狗血海王';
            
            thinkingDiv.innerHTML = `
                <div class="loading"></div>
                <span>${senderName}正在思考...</span>
            `;
            
            chatContainer.appendChild(thinkingDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return thinkingDiv;
        }
        
        // AIAgent System 约束配置
        const SYSTEM_PROMPT = `
你是校园情感辩论大师，一个专注于分析和讨论校园恋爱问题的AI助手。你需要根据不同角色定位给出专业的情感建议。

回答规则：
1. 首先分析用户的问题，理解其情感困惑的核心
2. 结合校园生活的实际情况给出具体建议
3. 提供实用的解决方案，而不仅仅是理论
4. 避免使用Markdown格式，使用自然的分段和强调
5. 保持回答的可读性和吸引力，适当使用例子说明
6. 语言风格符合角色定位，同时保持尊重和建设性
7. 回答长度适中，一般3-5句话，不要过于冗长
        `.trim();
        
        // 纯爱战神专属提示
        const PURE_LOVE_PROMPT = `
你现在是纯爱战神，必须严格按照以下特点回答：
- 坚信校园恋爱应该是纯粹、专一和真诚的
- 强调爱情中的责任、承诺和相互支持
- 认为恋爱应该建立在相互尊重和理解的基础上
- 鼓励长期稳定的关系，反对游戏和欺骗
- 回答风格真诚、理性、充满正能量
- 强调真心的重要性，反对玩弄感情
- 鼓励用户真诚对待感情，珍惜每一段相遇
        `.trim();
        
        // 狗血海王专属提示
        const PLAYER_PROMPT = `
你现在是狗血海王，必须严格按照以下特点回答：
- 认为校园情感应该多体验、多尝试，这是成长的一部分
- 强调个人自由和自我成长的重要性
- 认为在年轻时期不必过分严肃对待感情，应该享受过程
- 善于从多角度分析情感问题，包括现实和人性的复杂面
- 回答风格幽默、现实、略带调侃但不失分寸
- 提醒用户保护好自己，不要轻易受伤
- 鼓励用户了解自己的真实需求，不要被传统观念束缚
        `.trim();
        
        // 发送消息并处理流式响应
        async function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;
            
            // 在两个面板都添加用户消息
            addMessage(pureLoveChat, message, true);
            addMessage(playerChat, message, true);
            userInput.value = '';
            
            // 禁用按钮并显示加载状态
            sendButton.disabled = true;
            sendButton.innerHTML = '<div class="loading"></div>辩论中...';
            
            // 添加思考中指示器
            const pureLoveThinking = addThinkingIndicator(pureLoveChat, 'pure-love');
            const playerThinking = addThinkingIndicator(playerChat, 'player');
            
            try {
                // 先获取纯爱战神的回答
                const pureLoveResponse = await getAIResponse(message, 'pure-love');
                pureLoveThinking.remove();
                addMessage(pureLoveChat, pureLoveResponse, false, 'pure-love');
                
                // 延迟1秒后获取狗血海王的回答，营造先后回答的效果
                await new Promise(resolve => setTimeout(resolve, 1000));
                
                const playerResponse = await getAIResponse(message, 'player');
                playerThinking.remove();
                addMessage(playerChat, playerResponse, false, 'player');
                
            } catch (error) {
                console.error('请求出错:', error);
                pureLoveThinking.remove();
                playerThinking.remove();
                addMessage(pureLoveChat, `<strong>❌ 发生错误:</strong> ${error.message}`, false, 'pure-love');
                addMessage(playerChat, `<strong>❌ 发生错误:</strong> ${error.message}`, false, 'player');
            } finally {
                // 恢复按钮状态
                sendButton.disabled = false;
                sendButton.innerHTML = '发送';
            }
        }
        
        // 获取AI响应
        async function getAIResponse(question, role) {
            const API_URL = "https://api.gitcode.com/api/v5/chat/completions";
            const API_KEY = "qksqKsCyjmndptvTbSxJCiho";
            
            // 根据角色选择对应的提示
            const rolePrompt = role === 'pure-love' ? PURE_LOVE_PROMPT : PLAYER_PROMPT;
            
            const response = await fetch(API_URL, {
                method: 'POST',
                headers: {
                    "Authorization": `Bearer ${API_KEY}`,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    "messages": [
                        { "role": "system", "content": SYSTEM_PROMPT },
                        { "role": "system", "content": rolePrompt },
                        { "role": "user", "content": question }
                    ],
                    "model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
                    "stream": false, // 为了顺序回答，暂时关闭流式，改为完整获取后显示
                    "max_tokens": 1024,
                    "temperature": 0.7
                })
            });
            
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error?.message || '请求失败，请稍后重试。');
            }
            
            const data = await response.json();
            return data.choices?.[0]?.message?.content || '很抱歉，我无法回答这个问题。';
        }
        
        // 事件绑定
        sendButton.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
 
        suggestionTags.forEach(tag => {
            tag.addEventListener('click', () => {
                userInput.value = tag.getAttribute('data-question');
                sendMessage();
            });
        });
        
        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            userInput.focus();
        });
    </script>
</body>
</html>